<template>
  <div class="material-edit-container">
    <el-card class="edit-card">
      <template #header>
        <div class="card-header">
          <div class="header-content">
            <h2 class="header-title">
              <el-icon class="title-icon"><Box /></el-icon>
              {{ isEdit ? '编辑物资信息' : '新增物资' }}
            </h2>
          </div>
          <div class="header-actions">
            <el-button @click="goBack" class="cancel-button">取消</el-button>
            <el-button type="primary" @click="submitForm" class="submit-button">保存</el-button>
          </div>
        </div>
      </template>

      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="rules" 
        label-width="120px"
        label-position="right"
        class="material-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><InfoFilled /></el-icon>
            <span>基本信息</span>
          </div>
          <el-divider class="custom-divider" />
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="物资名称" prop="name">
                <el-input 
                  v-model="formData.name" 
                  placeholder="请输入物资名称"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><Goods /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="存放位置" prop="location">
                <el-input 
                  v-model="formData.location" 
                  placeholder="请输入仓库位置"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><Location /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="物资数量" prop="quantity">
                <el-input-number 
                  v-model="formData.quantity" 
                  controls-position="right"
                  class="form-number-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修次数" prop="repairCount">
                <el-input-number 
                  v-model="formData.repairCount" 
                  controls-position="right"
                  class="form-number-input"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 物资状况 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><Warning /></el-icon>
            <span>物资状况</span>
          </div>
          <el-divider class="custom-divider" />
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="物资种类" prop="type">
                <el-select 
                  v-model="formData.type" 
                  placeholder="请选择物资种类"
                  clearable
                  class="form-select"
                >
                  <el-option
                    v-for="item in typeOpition"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物资状态" prop="status">
                <el-select 
                  v-model="formData.status" 
                  placeholder="请选择物资状态"
                  clearable
                  class="form-select"
                >
                  <el-option
                    v-for="item in statusOpition"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 采购信息 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><ShoppingCart /></el-icon>
            <span>采购信息</span>
          </div>
          <el-divider class="custom-divider" />
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="采购日期" prop="purchaseDate">
                <el-date-picker
                  v-model="formData.purchaseDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  class="form-datepicker"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保质期到" prop="expireDate">
                <el-date-picker
                  v-model="formData.expireDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  class="form-datepicker"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="保修期(月)" prop="warrantyPeriod">
                <el-input-number 
                  v-model="formData.warrantyPeriod" 
                  controls-position="right"
                  class="form-number-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购单价" prop="purchasePrice">
                <el-input-number 
                  v-model="formData.purchasePrice" 
                  controls-position="right"
                  :precision="2"
                  class="form-number-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="采购总价" prop="totalPrice">
                <el-input-number 
                  v-model="formData.totalPrice" 
                  controls-position="right"
                  :precision="2"
                  class="form-number-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货商" prop="supplier">
                <el-input 
                  v-model="formData.supplier"
                  placeholder="请输入供货方"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><OfficeBuilding /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="操作员ID" prop="managerId">
            <el-input 
              v-model="formData.managerId"
              placeholder="请输入操作员ID"
              class="form-input"
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
  
  <script setup>
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { findById, save } from '@/api/goodsInfo'
  import { ElMessage } from 'element-plus'
  import dayjs from 'dayjs'
  
  const route = useRoute()
  const router = useRouter()
  const formRef = ref()
  
  const typeOpition = ref([
     { value: 1, label: '食品' },
      { value: 2, label: '药品' },
      { value: 3, label: '设备' },
      { value: 4, label: '耗材' },
      { value: 4, label: '其他' },


  // 从API获取实际数据
])
const statusOpition = ref([
     { value: 1, label: '可用' },
      { value: 2, label: '待维修' },
      { value: 3, label: '报废' },
      { value: 4, label: '库存不足' },
     


  // 从API获取实际数据
])
  
  // 表单数据
  const formData = reactive({
 
  })
  


  
  // 是否是编辑模式
  const isEdit = computed(() => route.query.id !== undefined)
  
  // 表单验证规则
  const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    email: [
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    hireDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
    positionId: [{ required: true, message: '请选择岗位', trigger: 'change' }]
  }
  
  // 加载员工数据（编辑模式）
  const loadEmployeeData = async (id) => {
    try {
      const res = await findById(id)
      Object.assign(formData, res.data)
      // 确保positionId正确赋值
      if (res.data.caregiver) {
        formData.caregiverId = res.data.caregiverId
      }
      if (res.data.csManager) {
        formData.employeeId = res.data.employeeId
      }
    } catch (error) {
      console.error('加载物资数据失败:', error)
      ElMessage.error('加载物资数据失败')
    }
  }
  
  // 提交表单
  const submitForm = async () => {
    try {
      await formRef.value.validate()
      
      
      if (isEdit.value) {
        await save(formData)
        ElMessage.success('物资信息更新成功')
      } else {
          console.log(formData)
        await save(formData)
        ElMessage.success('物资添加成功')
      }
      
      goBack()
    } catch (error) {
      console.error('保存失败:', error)
      if (!error.response) {
        ElMessage.error('表单验证失败，请检查输入')
      }
    }
  }
  
  // 返回上一页
  const goBack = () => {
    router.go(-1)
  }
  
  onMounted(() => {
    if (isEdit.value) {
      loadEmployeeData(route.query.id)
    } else {
      // 新增时设置默认入职日期为今天
      formData.hireDate = dayjs().format('YYYY-MM-DD')
    }
    
    // 这里应该加载岗位选项
    // loadPositionOptions()
  })
  </script>
  
  <style scoped>
.material-edit-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  min-height: 100vh;
}

.edit-card {
  margin: 0 auto;
  max-width: 1000px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: linear-gradient(120deg, #4a6bdf 0%, #3a56c4 100%);
}

.header-content {
  display: flex;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.title-icon {
  margin-right: 12px;
  font-size: 28px;
  color: #ffd04b;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.cancel-button,
.submit-button {
  height: 40px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.submit-button {
  background: linear-gradient(120deg, #4a6bdf 0%, #3a56c4 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}

.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(65, 105, 225, 0.4);
}

.cancel-button {
  background: white;
  color: #4a6bdf;
  border: 1px solid #4a6bdf;
}

.material-form {
  padding: 30px;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #4a6bdf;
  font-size: 16px;
  font-weight: 600;
}

.section-title .el-icon {
  margin-right: 10px;
  font-size: 20px;
}

.custom-divider {
  margin: 10px 0 20px;
  background-color: #f0f4f8;
}

.form-input :deep(.el-input__inner) {
  height: 42px;
  border-radius: 8px;
  padding-left: 36px;
}

.form-select {
  width: 100%;
}

.form-select :deep(.el-input__inner) {
  height: 42px;
  border-radius: 8px;
}

.form-datepicker {
  width: 100%;
}

.form-datepicker :deep(.el-input__inner) {
  height: 42px;
  border-radius: 8px;
}

.form-number-input :deep(.el-input__inner) {
  height: 42px;
  border-radius: 8px;
  text-align: left;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .el-col {
    width: 100%;
    margin-bottom: 15px;
  }
}
</style>